<template>
  <div>
    <zc-search
      style="margin-bottom: 24px"
      :style="style"
      :is-collpase="isCollpase"
      :request="requset"
      :search="search"
      :loading="loading"
      @change-data="changeData"
      v-if="showSearch"
    ></zc-search>
    <slot></slot>
    <div style="min-height: 300px" v-loading="loading">
      <div class="list" :style="style">
        <div
          :class="dataList && dataList.length !== 0 ? 'wrap' : 'wrap1'"
          :style="listItem?.style"
          v-if="extra && pageNum == 1 && !loading"
        >
          <div class="list-item1">
            <slot name="first-list"></slot>
          </div>
        </div>
        <template v-if="dataList && dataList.length !== 0">
          <template v-for="(item, index) in dataList" :key="index">
            <div
              :class="dataList.length !== 1 ? 'wrap' : 'wrap1'"
              :style="listItem?.style"
            >
              <div
                class="list-item"
                :class="{
                  colorBorder: item.matchingStatus == 2 || item.township == 2,
                }"
              >
                <slot name="list" :item="item"></slot>
              </div>
            </div>
          </template>
          <div class="empty-box"></div>
          <div class="empty-box"></div>
          <div class="empty-box"></div>
        </template>
        <template v-if="(!dataList || dataList.length == 0) && !extra">
          <el-empty
            style="background-color: #fff; width: 100%; margin-top: 24px"
            :image-size="200"
          />
        </template>
      </div>
    </div>

    <el-pagination
      v-if="showPagination"
      :hide-on-single-page="true"
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="paginationConfig?.pageSizes"
      :style="{ justifyContent: paginationAlign, marginTop: '24px' }"
      :layout="paginationConfig?.layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ZCTableOption } from "@/model/zcTable";
import { userStore } from "@/store/useStore";
import { StyleValue } from "vue";
import { $, $ref } from "vue/macros";

interface Props {
  listData?: any[];
  gap?: number;
  extra?: boolean;
  requset?: (props: any) => any;
  paginationAlign?: "right" | "left" | "center";
  paginationConfig?: { pageSizes: any[]; layout: string };
  size?: string;
  total?: number;
  showSearch?: boolean;
  style?: StyleValue;
  showPagination?: boolean;
  listItem?: { style: StyleValue };
  // 搜索内容
  search?: ZCTableOption[];
  isCollpase?: boolean;
}

let loading = $ref<boolean>(false);
// 当前页
let pageNum = ref<number>(1);
// 当前pagesize
let pageSize = ref<number>(10);
const props = withDefaults(defineProps<Props>(), {
  showSearch: true,
  showPagination: true,
});

// 数据
let dataList = reactive(props.listData || []);

// 刷新列表
const reload = () => {
  nextTick(() => {
    getData({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    });
  });
};

// 获取数据
const getData = async (params: any) => {
  if (props.requset) {
    loading = true;
    try {
      dataList = [];
      const res = (await props.requset({ ...params })) as [];
      dataList.push(...res);
    } finally {
      loading = false;
    }
  } else if (props.listData) {
    dataList = props.listData;
  } else if (dataList.length == 0) {
    throw new Error("缺少数据列表");
  }
};

let searchParams = reactive({});

// 获取查询数据
const changeData = async (params: any) => {
  console.log("..........", params);
  searchParams = params;
  if (pageNum.value !== 1) {
    return (pageNum.value = 1);
  }
  await getData({
    ...params,
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  });
};
// 监听pageSize和pageNum
watch([pageSize, pageNum], (newValue) => {
  let paginationObj: { pageNum: number; pageSize: number } = {
    pageNum: 0,
    pageSize: 0,
  };
  paginationObj.pageSize = newValue[0];
  paginationObj.pageNum = newValue[1];
  getData({ ...paginationObj, ...searchParams });
});

onMounted(() => {
  // 设置列表之间的宽度
  const eledom = document.querySelector(".list") as HTMLDivElement;
  eledom.style.setProperty("--card-gap", props.gap + "px");
  getData({ pageNum: 1, pageSize: 10 });
});

// pagesize改变
const handleSizeChange = (val: number) => {
  pageSize.value = val;
};
// pageNumber改变
const handleCurrentChange = (val: number) => {
  pageNum.value = val;
};

defineExpose({ reload });
</script>

<style lang="scss">
:root {
  --card-gap: 10px;
}

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .wrap {
    min-width: 386px;
    margin-bottom: 12px;
    width: 24%;
    flex-grow: 1;
    position: relative;
  }
  .wrap1 {
    min-width: 386px;
    margin-bottom: 12px;
    width: 24%;
  }
  .empty-box {
    min-width: 386px;
    width: 24%;
    flex-grow: 1;
    height: 0;
  }
  // .list-item-style {
  //   box-shadow: 0 0 5px var(--el-color-primary-light-7);
  //   border: 1px solid var(--el-color-primary) !important;
  // }
  .list-item1 {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .list-item:hover,
  .list-item1:hover {
    box-shadow: 0 0 5px var(--el-color-primary-light-3);
    border: 1px solid var(--el-color-primary) !important;
    transition: all 0.2s;
  }
  // .close {
  //   position: absolute;
  //   background: red;
  //   right: 3px;
  //   top: -9px;
  //   width: 30px;
  //   height: 30px;
  //   color: #fff;
  //   cursor: pointer;
  //   border-radius: 50%;
  //   z-index: 9999;
  //   text-align: center;
  //   line-height: 30px;
  // }
  // .list-item-close:hover::after {
  //   content: "x";
  //   position: absolute;
  //   right: -10px;
  //   top: -10px;
  //   width: 30px;
  //   height: 30px;
  //   background: #666;
  //   color: #fff;
  //   cursor: pointer;
  //   border-radius: 50%;
  //   z-index: 9999;
  //   text-align: center;
  //   line-height: 30px;
  // }

  .list-item,
  .list-item1 {
    position: relative;
    background-color: var(--el-bg-color-overlay);
    border: 1px solid #ddd;
    border-radius: 5px;
    width: calc(100% - var(--card-gap)) !important;
    // padding: 0 24px;
    box-sizing: border-box;
    // overflow: hidden;
    transition: box-shadow 0.3s;
    margin: auto;
    min-height: 100%;
    pointer-events: visibleStroke;
    // cursor: default;
  }

  .colorBorder {
    border: 1px solid red;
  }
}
</style>
